﻿@using Sunkist.FeaturedItemSlider.Models;
@{
    //Script.Require("jQuery_Cycle");
    //if (Model.Group.ImageStyle == ImageStyle.Inline) {
    //    Style.Require("FeaturedItems");
    //} else {
    //    Style.Require("FeaturedItems_Background");
    //}

    bool isFirstItem = true;
    bool useBackgroundImages = Model.Group.ImageStyle == ImageStyle.Background;
    string id = "#myCarousel";
}

@if (Model.FeaturedItems.Count > 0)
{
    <div id="myCarousel" class="carousel slide" data-interval="@Model.Group.SlideSpeed" data-ride="carousel">
        <ol class="carousel-indicators">
            @foreach (FeaturedItemViewModel featuredItem in Model.FeaturedItems)
            {
                //int currentItem = @Model.FeaturedItems.GetEnumerator().Current; // Get current item.
                <li data-target="@id" data-slide-to="@(featuredItem.SlideNumber - 1)" class=""></li>
            }
        </ol>

        <!-- Carousel items -->
        <div class="carousel-inner">
            @foreach (FeaturedItemViewModel featuredItem in Model.FeaturedItems)
            {
                var active = isFirstItem ? "active" : "";
                <div class="item @active">
                    @if (!featuredItem.ImagePath.IsEmpty()) { 
                            @Html.Image(featuredItem.ImagePath, "", null)
                        }
                    <div class="carousel-caption" style="top:@(Model.Group.HeadlineOffsetTop)px; left:(@Model.Group.HeadlineOffsetLeft)px">
                        <h3 style="color:#@Model.Group.ForegroundColor; background-color:#@Model.Group.BackgroundColor">@Html.Raw(featuredItem.Headline)</h3>
                        <p style="color:#@Model.Group.ForegroundColor; background-color:#@Model.Group.BackgroundColor">@Html.Raw(featuredItem.SubHeadline)</p>
                    </div>
                    </div>

                    isFirstItem = false;
            }
        </div>
        <!-- Carousel nav -->
        <a class="carousel-control left" data-slide="prev" href="@id">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="carousel-control right" data-slide="next" href="@id">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>

    <script type="text/javascript">
        $(document).ready(function () {
            // Activate carousel
            $("@id").carousel();
        });
    </script>

}
